import React, { useRef } from "react";
import { isNull } from "lodash-es";
import ReactECharts from "echarts-for-react";
import { Legend } from "bizcharts";

const Chart6 = React.memo(() => {
  let options = {
    title: [
      {
        text: "Teller申购总画面耗时组成",
        x: "20%",
        y: "5%",
        textAlign: "center",
        textBaseline: "middle",
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: `Teller申购页面停留时间`,
        x: "70%",
        y: "5%",
        textAlign: "center",
        textBaseline: "middle",
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: `产品信息平均停留耗时(单位:s)`,
        x: "20%",
        y: "55%",
        textAlign: "center",
        textBaseline: "middle",
        textStyle: {
          fontSize: 16,
        },
      },
      {
        text: `交易信息平均停留耗时(单位:s)`,
        x: "70%",
        y: "55%",
        textAlign: "center",
        textBaseline: "middle",
        textStyle: {
          fontSize: 16,
        },
      },
    ],

    dataset: {
      source: [
        ["type", "nums"],
        ["客户信息", 50],
        ["产品信息", 80],
        ["交易信息", 120],
      ],
    },
    color: [
      "#5ab1ef",
      "#b6a2de",
      "#2ec7c9",
      "#ffb980",
      "#d87a80",
      "#8d98b3",
      "#e5cf0d",
      "#97b552",
      "#95706d",
      "#dc69aa",
      "#07a2a4",
      "#9a7fd1",
      "#f5994e",
      "#c14089",
      "#26c0c0",
    ],
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: [
      {
        left: "2%",
        right: "55%",
        top: "60%",
        containLabel: true,
      },
      {
        gridindex: 1,
        left: "55%",
        right: "2%",
        top: "60%",
        containLabel: true,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: ["产品类型", "产品期次", "申购金额", "VOF RATE"],
      },
      {
        type: "category",
        gridIndex: 1,
        data: ["转出账户", "本息入账账号", "交易金额"],
      },
    ],
    yAxis: [
      {
        type: "value",
        show: true,
      },
      {
        type: "value",
        gridIndex: 1,
        show: true,
      },
    ],

    series: [
      {
        name: "申购总画面耗时组成",
        type: "pie",
        radius: 100,
        center: ["20%", "30%"],
        data: [
          { value: 0.5, name: "画面请求平均耗时" },
          { value: 0.8, name: "画面加载平均耗时" },
          { value: 300, name: "画面停留平均时长" },
        ],
        label: {
          normal: {
            formatter: "{b} {c}\n{d}%",
          },
        },
        emphasis: {
          scaleSize: 20,
        },
      },
      {
        type: "pie",
        center: ["70%", "30%"],
        radius: 100,
        label: {
          normal: {
            formatter: "{b}\n{d}%",
          },
        },
        labelLine: {
          normal: {
            show: true,
          },
        },
        encode: {
          itemName: "type",
          value: "nums",
        },
      },
      {
        data: [120, 200, 150, 80],
        type: "bar",
        barWidth: "30%",
        itemStyle: {
          color: (e) => {
            const colorList = ["#5ab1ef", "#b6a2de", "#2ec7c9", "#ffb980"];
            return colorList[e?.dataIndex];
          },
        },
      },
      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: [12, 20, 15],
        type: "bar",
        barWidth: "30%",
        itemStyle: {
          color: (e) => {
            const colorList = ["#5ab1ef", "#b6a2de", "#2ec7c9"];
            return colorList[e?.dataIndex];
          },
        },
      },
    ],
  };

  return (
    <>
      <ReactECharts
        // ref={chartRef}
        option={options}
        style={{ height: 700 }}
        // onEvents={onEvents}
      />
    </>
  );
});

export default Chart6;
